<template>
	<view>
		<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
			<view class="cu-form-group align-start">
				<view class="text-grey title">标题</view>
				<textarea maxlength="-1" v-model="form.name" placeholder="请输入标题"></textarea>
			</view>
			<view class="cu-bar bg-white">
				<view class="action text-grey">
					封面
				</view>
				<view class="action">
					1张
				</view>
			</view>
			<view class="cu-form-group border-light">
				<view class="grid col-4 grid-square  flex-sub" style="height: 150rpx;">
					<view class="bg-img" v-if="form.cover">
						<image @tap="ViewImage(index)" :src="form.cover" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg(index)">
							<text class='cuIcon-close'></text>
						</view>
					</view>
					<view class="solids" @tap="ChooseImage" v-else>
						<text class='cuIcon-cameraadd '></text>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="flex content align-center justify-between w-100">
					<view class="text-grey">
						作者
					</view>
					<view class="flex text-green ">
						<input placeholder="请输入作者" v-model="form.author.name" class="text-right"></input>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="flex content align-center justify-between w-100">
					<view class="text-grey">
						日期
					</view>
					<view class="flex text-green ">
						<input placeholder="请输入日期" v-model="form.author.date" class="text-right"></input>
					</view>
				</view>
			</view>
			<view class="cu-item">
				<view class="flex content align-center justify-between w-100">
					<view class="text-grey">
						标签
					</view>
					<view class="flex">
						<view @click="editTag(index)" v-for="(item,index) in form.tags" :key="index" class='cu-tag round bg-olive mr-2'>{{item}}</view>
						<button class="cu-btn sm ml-auto cuIcon">
							<text @click="show=true" class="cuIcon-add"></text>
						</button>
					</view>
				</view>
			</view>
			<view class="cu-form-group align-start">
				<view class="text-grey title">视频地址</view>
				<textarea maxlength="-1" v-model="form.iframe" placeholder="请粘贴iframe视频地址"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="text-grey title">MP4</view>
				<textarea maxlength="-1" v-model="form.video" placeholder="请粘贴MP4视频地址"></textarea>
			</view>
			<view class="cu-form-group align-start">
				<view class="text-grey title">描述:</view>
				<textarea maxlength="-1" style="min-height: 250rpx;" v-model="form.desc" placeholder="描述"></textarea>
			</view>
		</view>
		<view class="margin-tb-sm text-center px-3">
			<button @click="submit" class="cu-btn round bg-blue shadow block lg">发布</button>
		</view>
		<view class="cu-modal" :class="show?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{index>=0?'修改标签':'添加标签'}}</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<input placeholder="请输入标签名称" v-model="editText"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green " @tap="hideModal">取消</button>
						<button class="cu-btn line-green text-red ml-1" @tap="deleteTag">删除</button>
						<button class="cu-btn bg-green margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	const db=uniCloud.database()
	export default {
		data() {
			return {
				form: {
					name: '',
					tags: [],
					video: '',
					iframe: '',
					cover: '',
					desc: '',
					author: {
						avatar: 'https://cloud-minapp-34522.cloud.ifanrusercontent.com/1kj31lB7bZvlp3dv.jpg',
						name: '爽boy',
						date: ''
					}
				},
				editText: '',
				show: false,
				index: -1,
				id:0
			}
		},
		onLoad(options) {
			if(options.id){
				this.id=options.id
				this.loadData()
			}
		},
		methods: {
			loadData(){
				uni.showLoading({
					title:'加载中...'
				})
				db.collection('vlog').doc(this.id).get().then(res=>{
					uni.hideLoading()
					if(res.success&&res.result.data&&res.result.data.length>0){
						this.form=res.result.data[0]
						uni.setNavigationBarTitle({
							title:'修改作品'
						})
					}else{
						this.onBack()
					}
				}).catch(err=>{
					uni.hideLoading()
				})
			},
			hideModal() {
				this.editText = ''
				this.show = false
				this.index = -1
			},
			deleteTag() {
				this.form.tags.splice(this.index, 1)
				this.index = -1
				this.show = false
			},
			confirmModal() {
				this.show = false
				if (this.index >= 0) {
					this.form.tags[index] = this.editText
				} else {
					this.form.tags.push(this.editText)
				}
				let msg=this.index===-1?'添加成功':'修改成功'
				this.index = -1
				this.editText=''
				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},
			editTag(index) {
				this.index = index
				this.editText = this.form.tags[index]
			},
			submit() {
				if (!this.form['video'] && !this.form['iframe']) {
					return uni.showToast({
						title: '视频内容不能为空',
						icon: 'none'
					});
				}
				for (let key in this.form) {
					if (!this.form[key] && key !== 'video' && key !== 'iframe') {
						return uni.showToast({
							title: '内容不能为空',
							icon: 'none'
						});
					}
				}
				uni.showLoading({
					title:this.id>0?'修改中...':'发布中...'
				})
				uniCloud.callFunction({
					name: 'publish',
					data: this.form
				}).then(res => {
					if (res.success) {
						uni.hideLoading()
						uni.showToast({
							title: this.id!==0?'修改成功':'发布成功',
							icon: 'none'
						});
						this.form = {
							name: '',
							tags: [],
							video: '',
							iframe: '',
							cover: '',
							desc: '',
							author: {
								avatar: 'https://cloud-minapp-34522.cloud.ifanrusercontent.com/1kj31lB7bZvlp3dv.jpg',
								name: '爽boy',
								date: ''
							}
						}
						uni.navigateBack({
							delta:1
						})
					}
				}).catch(err=>{
					uni.hideLoading()
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					});
				})
				// 提交数据
			},
			ChooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: async (res) => {
						// 上传照片
						uni.showLoading({
							title: '上传中...'
						})
						let cloudPath = 'vlog' + new Date().valueOf() + '.jpg';
						let filePath = res.tempFilePaths[0]
						let result = await uniCloud.uploadFile({
							filePath,
							cloudPath
						});
						uni.hideLoading()
						this.form.cover = result.fileID
					}
				});
			},
			ViewImage(index) {
				uni.previewImage({
					urls: [this.form.cover],
					current: this.form.cover
				});
			},
			DelImg(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							this.form.cover = ''
						}
					}
				})
			}
		},
	}
</script>
